<template>
  <yd-layout class="payment">
    <v-header slot="navbar" title="在线支付">
      <div @click="back" slot = "left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </div>
    </v-header>
    <yd-cell-group>
      <yd-cell-item>
        <div slot="left" class = "label">金额</div>
        <div slot="left">500积分+¥ 39.90</div>
      </yd-cell-item>
      <yd-cell-item>
        <div slot="left" class = "label">数量</div>
        <div slot="left">1件商品</div>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <div slot="left">请在<span class="primary">30分钟</span>内完成付款逾期订单将自动取消</div>
        <span slot="right" class = "primary">00:29:59</span>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <div class = "label" slot="left">收货人</div>
        <span slot="right">包子</span>
      </yd-cell-item>
      <yd-cell-item>
        <div class = "label" slot="left">手机号</div>
        <span slot="right">13811112222</span>
      </yd-cell-item>
      <yd-cell-item>
        <span class = "mr" slot="left">北京市</span>
        <span class = "mr" slot="left">市辖区</span>
        <span  class = "mr" slot="left"> 朝阳区望京SOHO1号塔</span>
      </yd-cell-item>
    </yd-cell-group>
    <div class="group">
      <h3 class="group_title">支付方式</h3>
      <div class="flex middle group_li">
        <box bgImg="http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg" class="pay_logo"></box>
        <div class="f1">
          <div class="title">微信</div>
          <div class="desc">推荐已安装微信客户端的用户使用</div>
        </div>
      </div>
      <div class="flex middle group_li">
        <box bgImg="http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg" class="pay_logo">
        </box>
        <div class="f1">
          <div class="title">支付宝</div>
          <div class="desc">推荐支付宝用户使用</div>
        </div>
      </div>
    </div>
    <yd-button size="large" slot="tabbar">立即支付</yd-button>
  </yd-layout>
</template>
<script>
export default {
  name: 'payment'
}
</script>
<style lang="scss" scoped>
  .payment{
    .label{
      width: 4em;
    }
    /deep/ .yd-cell-right{
      min-height: .64rem;
    }
    .group{
      box-sizing: border-box;
      padding-left: .24rem;
      line-height: 2em;
      overflow: hidden;
      background-color: #fff;
      .group_title{
        margin: .1rem 0;
      }
      .group_li{
        height: 1rem;
        padding: $padding;
        box-sizing: border-box;
        .pay_logo{
          width: .8rem;
          margin-right: .2rem;
        }
        .desc{
          color: #999;
        }
      }
    }
  }
</style>
